<template>
    <div class="show-order">
        <div class="header">
            <router-link class="header-btnLeft" :to="'/show-buy/'+goods_id" ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">确认订单</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="product">
            <img class="product-img" :src="product.goods_image">
            <div class="product-info">
                <div class="product-info-title">{{product.poi_name}}</div>
                <div class="product-info-title2">{{product.goods_name}}</div>
                <div class="product-info-desc">出游时间：{{product.travel_date}}</div>
                <div class="product-info-desc">数量：
                    <span v-for="item in product.person" wx:key="unique" v-if="item.person_num">
                        {{item.person_name}}×{{item.person_num}}
                    </span>
                </div>
            </div>
        </div>
        <div class="h30"></div>
        <div class="list">
            <form bindsubmit="formSubmit">
                <div class="list-title">联系人信息</div>
                <div class="list-item">
                    <div class="list-item-title">姓（拼音）<span class="warning">*</span></div>
                    <div class="list-item-input"><input name="name1" @input="association($event.target.value,'xing')"  v-model="name1" placeholder="请输入您的姓氏"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">名（拼音）<span class="warning">*</span></div>
                    <div class="list-item-input"><input name="name2" @input="association($event.target.value,'ming')"   v-model="name2"  placeholder="请输入您的名"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">微信号</div>
                    <div class="list-item-input"><input name="wechat"  v-model="wechat"  placeholder="方便与您确认行程"/></div>
                </div>
                <div  class="list-item">
                    <div class="list-item-title">手机号 <span class="warning">*</span></div>
                    <div  class="list-item-input">
                        <TelCode :phoneCode="phoneCode" v-on:phoneCodeFn="phoneCodeFnFn" ></TelCode>
                        <input name="phone" class='list-item-input-phone' @input="association($event.target.value,'phone')"    v-model.trim="phone" placeholder="请输入订单联系号码"  maxlength="30"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">邮箱
                        <span class="warning">*</span>
                    </div>
                    <div class="list-item-input"><input name="email" @input="association($event.target.value,'email')"   v-model.trim="email" placeholder="方便接收行程确认信息"/></div>
                </div>
                <div class="list-item" v-if="bookingQuestions.length>0" v-for="(item,index) in bookingQuestions" :key="item.stringQuestionId">
                    <div class="list-item-title">{{item.title}}
                        <span class="warning">*</span>
                    </div>
                    <div class="list-item-input"><input style="width:100%" :name="item.stringQuestionId"  v-model="bookingQuestions[index].answer" :placeholder="item.subTitle"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">接待地址</div>
                    <div class="list-item-input"><input name="serve_address"   v-model="serve_address" placeholder="请输入接待地址"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">备注</div>
                    <div class="list-item-input"><input name="content"   v-model="content" placeholder="请输入备注信息"/></div>
                </div>
            </form>
        </div>
        <div class="h30" v-if="typesource=='viator'"></div>
        <div class="person"  v-if="typesource=='viator'">
            <div class="person-class" v-for="(item1,index1) in person">
                <h3 class="person-class-title"><span class="person-class-title-icon"></span>{{item1.person_name}}</h3>
                <div class="person-class-item" v-for="(item2,index2) in parseInt(item1.person_num)">
                    <h4 v-if="index1==0 && index2==0" class="person-class-item-title">主出行人信息</h4>
                    <div class="person-class-item-input">
                        <div class="tit"   v-if="index1!=0 ||index2!=0 ">成员{{index2+1}}：</div>
                        <div class="col"><input :name="'xing_'+index1+'_'+index2" @input="verification($event.target.value)"  v-model="person[index1].people[index2].xing"  placeholder="请输入姓（拼音）*"/></div>
                        <div class="col"><input :name="'ming_'+index1+'_'+index2" @input="verification($event.target.value)"   v-model="person[index1].people[index2].ming"  placeholder="请输入名（拼音）* "/></div>
                    </div>
                    <div  class="person-class-item-input" v-if="index1==0 && index2==0">
                        <TelCode :phoneCode="person[index1].people[index2].phoneCode" v-on:phoneCodeFn="phoneCodePeopleFn" ></TelCode>
                        <div class="col"><input  :name="'phone_'+index1+'_'+index2"   v-model="person[index1].people[index2].phone"    placeholder="请输入手机号码 *"/></div>
                    </div>
                    <div  class="person-class-item-input"  v-if="index1==0 && index2==0">
                        <div class="col"><input  :name="'email_'+index1+'_'+index2"    v-model="person[index1].people[index2].email"   placeholder="请输入邮箱，方便接收行程确认信息 *"/></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h30"></div>
        <div class="ticketAdd">
            <div class="ticketAdd-title">旅行红包</div>
            <div class="ticketAdd-choose">

                <div class="ticketAdd-choose-title">产品旅行红包</div>
                <div class="ticketAdd-choose-btn" @click='ticketOpen'>
                    请选择旅行红包
                    <span class="ticketAdd-choose-btn-price">{{ticketinfo}}</span>
                    <img class="ticketAdd-choose-btn-img" v-if="!ticket_coupon_id" src="../assets/city-list-arr.png"/>
                    <img class="ticketAdd-choose-btn-img" v-if="ticket_coupon_id" src="../assets/close.png"/>
                </div>
            </div>
        </div>
        <!--优惠券 begin-->
        <div class="ticket" v-if="ticket" >
            <div class="ticket-main"  ref="ticket_main" v-bind:style="{'margin-top':ticket_top+'px'}">
                <div class="ticket-main-title">产品旅行红包</div>
                <img class="ticket-main-close" src="../assets/close.png" @click='ticketClose'>
                <div class="ticket-main-list">
                    <div class="ticket-main-list-item" v-if="ticketArr.length>0" v-for="(item,index) in ticketArr" @click="chooseTicket(item.coupon_id)">
                        <div class="ticket-main-list-item-left">
                            <div class="ticket-main-list-item-left-price" v-if="item.discount">
                                {{item.discount*10}}
                                <span class="ticket-main-list-item-left-price-sign">折</span>
                            </div>
                            <div class="ticket-main-list-item-left-price" v-else>
                                <p class="ticket-main-list-item-left-price-p">{{item.coupon_name}}</p>
                                <span class="ticket-main-list-item-left-price-sign" style="font-size: 30px;margin-top: 15px">¥</span>
                                {{item.full_reduction}}
                            </div>
                        </div>
                        <div class="ticket-main-list-item-right">
                            <div class="ticket-main-list-item-right-text1">满 {{item.coupon_usecondition}} 元可用</div>
                            <div class="ticket-main-list-item-right-text2">有效期：{{item.validityperiod}}</div>
                            <div class="ticket-main-list-item-right-dot"></div>
                        </div>
                    </div>
                    <div v-else class="noticket"> 暂无旅行红包</div>
                </div>

            </div>
        </div>
        <div class="h120"></div>


        <div class="buyBar">
            <div class="buyBar-item">
                <div class="buyBar-item-title">总价</div>
                <div class="buyBar-item-price">¥ {{totalPricePay}}</div>
            </div>
            <div class="buyBar-buy" @click='buyPost'>立即预订</div>
        </div>
        <mt-actionsheet
                :actions="payActions"
                v-model="payState">
        </mt-actionsheet>
    </div>
</template>

<script>
    import { Card, createToken,cardElement, } from 'vue-stripe-elements-plus';
    import { Toast,MessageBox, Indicator,Actionsheet } from 'mint-ui';
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import TelCode from '../components/TelCode';
    import storage from "../store/localstorage";

    //add by sunyifei for debug
    // import Vue from 'vue';
    // import VueToasted from 'vue-toasted';
    //
    // Vue.use(VueToasted, {
    //   theme: "toasted-primary",
    //   position: 'top-left'
    // });


    export default {
        name: "Show-order",
        components:{
            TelCode,
            Card
        },
        data() {
            return {
                person:[],
                url:config.url,
                name1: '',
                name2: '',
                wechat: '',
                phone:'',
                phoneCode:'电话区号',
                email:'',
                content: '',
                serve_address:'',
                totalPrice: 0, //总价
                totalPricePay: 0, //实际支付总价
                ticketinfo: '', //优惠信息
                order_id: '',
                goods_id: '',
                product: '',
                ticket: false,
                ticketArr: [],  //优惠券数组
                ticket_coupon_id: '',//被选择中优惠券
                coupon_type:'', //优惠券类型
                ticket_top: 200, //弹窗位置,
                clientHeight:0,
                typesource:'',//判断三方订单
                bookingQuestions:[],//预定需回答的问题
                payState:false,
                payActions:[],
                orderType:"",//当前订单类型
                order_no:"",//当前订单号
                stripePayInfo:{},//stripe订单价格集合
            }
        },
        methods: {
            verification(v){
                var reg=/[\u4E00-\u9FA5]/
                if(reg.test(v) && v.length<2){
                    Toast({message:'成员姓、名请输入拼音,长度大于2', duration: 1000});
                }
            },
            //第三方产品 关联更新用户信息
            association(val,key){
                if(this.typesource=='viator'){
                    this.person[0].people[0][key]=val;
                }
            },
            phoneCodePeopleFn(val){
                this.person[0].people[0].phoneCode=val;
            },
            phoneCodeFnFn(val){
                this.phoneCode=val;
                if(this.typesource=='viator'){
                    this.person[0].people[0].phoneCode=val;
                }
            },
            buyPost: function () {
                var _that = this;
                var regChinese=/[\u4E00-\u9FA5]/
                if(_that.name1.length<2 || regChinese.test(_that.name1)){
                    Toast({message:'联系人姓请输入拼音，长度大于2', duration: 1000});
                    return false;
                }
                if(_that.name2.length<2 || regChinese.test(_that.name2)){
                    Toast({message:'联系人名请输入拼音，长度大于2', duration: 1000});
                    return false;
                }

                var phoneCode = _that.phoneCode;
                var regPhoneCode = new RegExp("^[0\+][0-9]{1,5}$");
                if (!phoneCode) {
                    Toast({message:'请输入电话号码国家代码', duration: 1000});
                    return false;
                } else if (!regPhoneCode.test(phoneCode)){
                    Toast({message:'请设置电话区号', duration: 1000});
                    return false;
                }
                var phone = _that.phone;
                //var regMobile = new RegExp("^(1)[0-9]{10}$");
                if (!phone || phone.length < 3) {
                    Toast({message:'请输入正确手机号码', duration: 1000});
                    return false;
                }
                for(let b = 0; b < _that.bookingQuestions.length; b++){
                    if (_that.bookingQuestions[b].answer.length < 1) {
                        Toast({message:'请输入'+_that.bookingQuestions[b].title, duration: 1000});
                        return;
                    }
                }


                // else if (!regMobile.test(phone)) {
                //   _that.showToast('手机号码格式不正确');
                //   return false;
                // }

                var email = _that.email;
                var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
                if (!email) {
                    Toast({message:'请输入邮箱', duration: 1000});
                    return false ;
                } else if (!regEmail.test(email)) {
                    Toast({message:'请输入正确的邮箱', duration: 1000});
                    return false;
                }

                var personVerifi=true
                // 判断成员信息
                console.log(_that.person)
                _that.person.forEach((item1,index2)=>{
                    item1.people.forEach((item2)=>{
                        if(item2.xing.length<2 || regChinese.test(item2.xing) || item2.ming.length<2 || regChinese.test(item2.ming)){
                            Toast({message:'成员姓、名请输入拼音，长度大于2', duration: 1000});
                            personVerifi=false;
                        }
                    })
                })




                if(!personVerifi){
                    return false
                }

                var params = {
                    order_id: _that.order_id,
                    fold_money: _that.totalPricePay,
                    coupon_id: _that.ticket_coupon_id,
                    coupon_type:_that.coupon_type,
                    contact_xing: _that.name1,
                    contact_ming: _that.name2,
                    wechat_number: _that.wechat,
                    phone: _that.phoneCode + _that.phone,
                    e_mail: _that.email,
                    serve_address: _that.serve_address,
                    remarks: _that.content,
                    order_no: _that.order_no,
                    orderType: _that.orderType,
                    person:JSON.stringify(_that.person)
                }
                if(_that.bookingQuestions.length>0){
                    params.bookingQuestionAnswers = [];
                    _that.bookingQuestions.forEach((item,i)=>{
                        params.bookingQuestionAnswers.push({
                            questionId:item.questionId,
                            answer:item.answer,
                        })
                    })
                    params.bookingQuestionAnswers = JSON.stringify(params.bookingQuestionAnswers)
                }

                _that.axios.postAll('wapordersubmit', params,true)
                    .then(res => {
                        storage.set('contact',{
                            contact_xing: _that.name1,
                            contact_ming: _that.name2,
                            wechat_number: _that.wechat,
                            phone: _that.phone,
                            phoneCode: _that.phoneCode,
                            e_mail: _that.email,
                        })
                        if(res.data.code == 0){
                            // 判断是否需要调用支付接口
                            if(_that.totalPricePay==0 || res.data.fold_money == 0){
                                _that.$router.push({path:'/pay-success',query:{goods_id:_that.goods_id,order_id: _that.order_id}})
                            }else{
                                // _that.payState = true;
                                // _that.stripePayInfo.moneyArr = res.data.moneyArr;
                                
                                // 跳转到确认订单支付页面
                                _that.$router.replace('/my-order-detail-unpaid?order_no='+_that.order_no);
                            }
                        }else if(res.data.code == 305){
                            //重复订单跳转到我的订单
                            _that.$router.replace('/my-order-detail-unpaid?order_no='+_that.order_no);
                        }else{
                            //其他错误提示
                            Toast({message: res.data.msg, duration: 1500});
                        }
                        
                    })
                    .catch(err => console.log(err));
            },
            // 开始支付
            beginPay(){
              let fromApp = 0;
              if(this.$store.state.appNestState) {
                fromApp = 1;
              }
              // Vue.toasted.show('beginPay at20190125 : fromApp =' + fromApp);

              let postData = {
                order_id: this.order_id,
                order_no: this.order_no,
                orderType: this.orderType
              };

              let appid = window.localStorage.appid;
              if(fromApp && appid && appid.length > 0) {
                postData.appid = appid;
              }
              // Vue.toasted.show('/wxpay : appid =' + appid);

              this.axios.post('/wxpay', postData).then(res => {
                // Vue.toasted.show('res : fromApp =' + fromApp);
                // Vue.toasted.show('/wxpay : res.data =' + JSON.stringify(res.data));

                // Vue.toasted.show('res.data.appId =' + res.data.appId);
                // Vue.toasted.show('res.data.partnerid =' + res.data.partnerid);
                // Vue.toasted.show('res.data.prepayid =' + res.data.prepayid);


                if(!fromApp) {
                    var params = {
                      appId: res.data.appId,
                      timeStamp: res.data.timeStamp,
                      nonceStr: res.data.nonceStr,
                      package: res.data.package,
                      paySign: res.data.paySign
                    };
                    this.wxPay(params);

                  } else {
                    this.appWXPay(res.data);
                  }
                }).catch(err => console.log(err));
            },
            // 微信支付
            wxPay(params){
                var _that=this
                function onBridgeReady(){
                    console.log('onBridgeReady');
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":params.appId,     //公众号名称，由商户传入
                            "timeStamp":params.timeStamp,  //时间戳，自1970年以来的秒数
                            "nonceStr":params.nonceStr, //随机串
                            "package":params.package,
                            "signType":"MD5",         //微信签名方式
                            "paySign":params.paySign //微信签名
                        },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                _that.$router.push({path:'/pay-success',query:{goods_id:_that.goods_id,order_id: _that.order_id}});
                            }
                        });
                }
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                }else{
                    onBridgeReady();
                }
            },

            getData(){
                let _that = this;
                let params = {
                    order_id: _that.order_id,
                    orderType: _that.orderType,
                    order_no: _that.order_no
                }
                _that.axios.post('waporderdetermine', params)
                    .then(res => {
                        var reg=/^(http|https):\/\//;
                        if(!reg.test(res.data.goods_image)){
                            res.data.goods_image=_that.url+ res.data.goods_image
                        }
                        _that.product=res.data;
                        _that.totalPrice=res.data.original_money;
                        _that.totalPricePay=res.data.original_money;
                        //_that.goods_id=res.data.goods_id;
                        _that.typesource=res.data.typesource
                        _that.getTicket();
                        _that.share(); //分享
                        _that.getGoodsData(); //获取商品信息
                        //console.log(res.data.person)
                        // 处理购买成员信息
                        if(_that.typesource=='viator'){
                            var person=[]
                            res.data.person.forEach((item,index)=>{
                                item.people=[];
                                for(var i=0;i<parseInt(item.person_num);i++){
                                    if(index==0 && i==0 ){
                                        var contact=storage.get('contact');
                                        if(contact){
                                            item.people.push({
                                                xing:contact.contact_xing,
                                                ming:contact.contact_ming,
                                                phoneCode:contact.phoneCode,
                                                phone:contact.phone,
                                                email:contact.e_mail
                                            })
                                        }else{
                                            item.people.push({
                                                xing:'',
                                                ming:'',
                                                phoneCode:'+86',
                                                phone:'',
                                                email:''
                                            })
                                        }
                                    }else{
                                        item.people.push({xing:'',ming:''})
                                    }
                                }
                                person.push(item);
                            })
                            this.person=person;
                            //console.log(_that.person)
                        }
                    })
                    .catch(err => console.log(err));
            },
            //获取商品信息
            getGoodsData:function(){
                let _that = this;
                let params = {
                    goods_id: _that.$route.query.goods_id
                };
                //console.log(params)
                _that.axios.postAll('wapgoodsdetails', params,true)
                    .then(res => {
                        if(res.data.data.bookingQuestions){
                            res.data.data.bookingQuestions.forEach((item,i)=>{
                                _that.bookingQuestions.push({
                                    title:item.title,
                                    subTitle:item.subTitle,
                                    stringQuestionId:item.stringQuestionId,
                                    questionId:item.questionId,
                                    answer:""
                                })
                            })
                        }
                    }).catch(err => {
                    console.log(err)
                });
            },
            // 打开优惠券
            ticketOpen: function () {
                var _that=this;
                if (_that.ticket_coupon_id) { //被选择优惠券ID
                    /*var ticketArr = _that.ticketArr;
                    for (var i = 0; i < ticketArr.length; i++) {
                        if (_that.ticket_coupon_id == ticketArr[i].coupon_id) {
                            if(ticketArr[i].type=='KBX'){
                                _that.axios.postAll('/refund',{
                                    order_id:_that.order_id,
                                    coupon_id:ticketArr[i].coupon_id,
                                    coupon_type:ticketArr[i].type //优惠券自己\第三方
                                },true)
                                    .then(res => {
                                        if(res.data.code!=0){
                                            Toast({message: res.data.msg, duration: 1500});
                                        }
                                        _that.ticket_coupon_id='';
                                        _that.coupon_type='' //优惠券自己\第三方
                                        _that.ticket=false;
                                        _that.totalPriceFn();// 计算总价
                                    })
                                    .catch(err => console.log(err));
                            }else{

                            }
                            break;
                        }
                    }*/
                    _that.ticket_coupon_id='';
                    _that.coupon_type='';
                    _that.ticket=false;
                    _that.totalPriceFn();// 计算总价
                } else if(_that.ticketArr==undefined){
                    Toast({message:'暂无可用旅行红包', duration: 1000});
                } else {
                    _that.ticket = true
                    setTimeout(() => {
                        _that.ticket_top = (_that.clientHeight - parseInt(window.getComputedStyle(_that.$refs.ticket_main).height)) / 2
                    }, 10)
                }
            },
            ticketClose() {
                this.ticket=false
            },
            // 获取优惠券
            getTicket() {
                this.axios.post('wapcouponfollowing', {goods_id: this.goods_id})
                    .then(res => {
                        this.ticketArr = res.data
                    })
                    .catch(err => console.log(err));
            },
            //选择优惠券
            chooseTicket(coupon_id) {
                this.ticket_coupon_id=coupon_id;
                this.ticket=false
                this.totalPriceFn();// 计算总价
            },
            // 计算总价
            totalPriceFn() {
                var _that = this;
                var totalPrice = _that.totalPrice, totalPricePay = _that.totalPrice;
                var ticketinfo = '';
                if (_that.ticket_coupon_id) {
                    var ticketArr = _that.ticketArr;
                    for (var i = 0; i < ticketArr.length; i++) {
                        if (_that.ticket_coupon_id == ticketArr[i].coupon_id) {
                            if ((parseFloat(totalPrice) >= parseFloat(ticketArr[i].coupon_usecondition)) || ticketArr[i].type=='KBX') {
                                /*if(ticketArr[i].type=='KBX'){
                                    this.axios.postAll('/price',{
                                        order_id:this.order_id,
                                        coupon_id:ticketArr[i].coupon_id,
                                        coupon_type:ticketArr[i].type //优惠券自己\第三方
                                    },true)
                                        .then(res => {
                                            //console.log(res)
                                            if(res.data.code==0){
                                                ticketinfo = '-' +  (parseInt(res.data.data.yuanjia) - res.data.data.discountprice)
                                                totalPricePay = res.data.data.discountprice
                                                totalPricePay = Math.round(totalPricePay * 100) / 100
                                                _that.totalPricePay = totalPricePay
                                                _that.ticketinfo = ticketinfo
                                                this.coupon_type=ticketArr[i].type
                                            }else{
                                                Toast({message: res.data.msg, duration: 1500});
                                                _that.ticket_coupon_id='';
                                            }
                                        })
                                        .catch(err => console.log(err));
                                }else{
                                }*/
                                if (ticketArr[i].discount) {
                                    totalPricePay = totalPrice * ticketArr[i].discount
                                    ticketinfo = ticketArr[i].discount * 10 + '折';
                                } else {
                                    var temp_ticketinfo=''
                                    if(totalPricePay > ticketArr[i].full_reduction){
                                        temp_ticketinfo = ticketArr[i].full_reduction;
                                        totalPricePay = totalPricePay - ticketArr[i].full_reduction
                                    }else{
                                        temp_ticketinfo = totalPricePay
                                        totalPricePay = 0
                                    }
                                    ticketinfo = '-' + temp_ticketinfo + '元';
                                }
                                this.coupon_type=ticketArr[i].type //优惠券自己\第三方
                            }else{
                                _that.ticket_coupon_id=''
                                Toast({message:'不符合旅行红包使用条件', duration: 1000});
                                return false;
                            }
                            break;
                        }
                    }
                }
                totalPricePay = Math.round(totalPricePay * 100) / 100
                _that.totalPricePay = totalPricePay
                _that.ticketinfo = ticketinfo
            },
            share() {
                wxShare({
                    title: '选择套餐类型/日期/人群', // 分享标题
                    desc: this.product.poi_name+this.product.goods_name, // 分享描述
                    link: config.url+'/quick_help_wap1/#/show-buy/'+this.goods_id, // 分享链接
                    imgUrl: this.product.goods_image, // 分享图标
                    debug: false
                }, function () {
                    console.log('分享成功')
                });
            },

            appWXPay(params) {
              let that = this;

              let data = {
                command: 'wechatPay',
                content: {
                  action:'wechatPay',
                  orderId: that.order_id,
                  goodsId: that.goods_id,
                  partnerId: params.partnerid,
                  prepayId: params.prepayid,
                  timeStamp: params.timestamp,
                  package: params.package,
                  nonceStr: params.noncestr,
                  sign: params.sign
                }
              };
              window.postMessage(JSON.stringify(data))
            },

            inputCard($event){
                this.events = $event;
                this.complete = $event.complete
            },
        },
        mounted(){
            let _that = this;
            this.order_id=this.$route.query.order_id;
            this.orderType=this.$route.query.orderType;
            this.order_no=this.$route.query.order_no;
            this.goods_id=this.$route.query.goods_id;
            this.getData();
            this.clientHeight=document.documentElement.clientHeight;
            this.payActions = [
                {
                    name:"微信支付",
                    method:function(){
                        _that.beginPay();
                    }
                },
                {
                    name:"信用卡支付",
                    method:function(){
                      _that.stripePayInfo.orderData = {
                          goods_id:_that.goods_id,
                          order_id:_that.order_id,
                          orderType:_that.orderType,
                          order_no:_that.order_no,
                      }
                      // _that.appPay()
                        _that.$router.push({path:'/stripe-pay'})
                    }
                }
            ];


          //监听RN发过来的消息
          document.addEventListener("message", function (data) {
            let message = data.data;
            let messageObject = JSON.parse(message);
            if (messageObject.command) {
              switch (messageObject.command) {
                case 'RNMessage' : {
                  // Vue.toasted.show('WXPaySuccess !!!!');
                  break;
                }

                case 'WXPaySuccess': {
                  // Vue.toasted.show('WXPaySuccess !!!!');

                  _that.$router.push({path:'/pay-success',query:{goods_id:messageObject.content.goodsId, order_id: messageObject.content.orderId}});
                  break;
                }
              }
            }
          });
        },
        beforeMount(){
            if(storage.get('contact')){
                var contact=storage.get('contact');
                this.name1=contact.contact_xing
                this.name2=contact.contact_ming
                this.wechat=contact.wechat_number
                this.phone=contact.phone
                this.phoneCode=contact.phoneCode
                this.email=contact.e_mail
            }
        },
        beforeRouteLeave(to, from, next) {
            if (to.name == "stripe-pay") {
                sessionStorage.stripePayInfo = JSON.stringify(this.stripePayInfo);
                next();
            }else{
                sessionStorage.removeItem("stripePayInfo");
                next();
            }
        }
    }
</script>

<style lang="scss">

    @import "../assets/base";

    .show-order .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .show-order .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .show-order{
        background: $bgcolor1;
        height: 100%;
    }

    .show-order .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }

    }

    //产品信息

    .show-order .product {
        padding: rpx(30);
        display: flex;
        align-items: center;
        background: $color0;
        &-img {
            width: rpx(160);
            height: rpx(160);
        }
        &-info {
            flex: 1;
            padding-left: rpx(30);
            line-height: 130%;
            &-title {
                font-size: rpx(30);
            }
            &-title2 {
                font-size: rpx(24);
                color: $color5;
            }
            &-desc {
                font-size: rpx(24);
                color: $color5;
            }
        }
    }

    //项列表
    .show-order .list {
        background: $color0;
        &-title {
            font-size: rpx(36);
            padding: rpx(30);
        }
        &-item {
            display: flex;
            align-items: center;
            padding:rpx(35) rpx(30);
            border-bottom: solid 1px $color2;

            &-title {
                width: rpx(200);
                font-size: rpx(30);
            }
            &-input {
                flex: 1;
                display: flex;
                input{
                    font-size: rpx(30);
                }
                &-phoneCode{
                    width:rpx(120);
                    border-right: solid 1px $color2;
                }
                &-phone{
                    overflow: hidden;
                    padding-left: rpx(20);
                }
            }
            .warning {
                color: $color3;
            }
        }
    }
    .show-order .person{
        background: $color0;
        &-class{
            padding: rpx(20) 0;
            border-bottom: solid 1px $color2;
            &-title {
                font-size: rpx(30);
                padding: rpx(20) rpx(30);
                font-weight: normal;
                &-icon {
                    display: inline-block;
                    margin-right: rpx(20);
                    width: rpx(8);
                    height: rpx(28);
                    border-radius: rpx(6);
                    background: $color3;

                }
            }
            &-item {
                padding:0 rpx(30);
                &-title {
                    font-size: rpx(28);
                    font-weight: normal;
                    padding:rpx(10) 0;
                }
                &-input{
                    display: flex;
                    align-items: center;
                    padding: rpx(20) 0;
                    box-sizing: border-box;
                    overflow: hidden;
                    font-size: rpx(28);
                    &.tit{
                        width: rpx(80);
                    }
                    .col{
                        flex: 1;
                        padding-right: rpx(20);
                        input{
                            width: 100%;
                            border-bottom:1px solid #eee;
                            font-size: rpx(28);
                        }
                    }
                }
            }
        }
    }
    .show-order .ticketAdd {
        padding: rpx(30);
        background: $color0;
        &-title {
            font-size: rpx(36);
            padding-bottom: rpx(30);
        }
        &-choose {

            display: flex;
            &-title {
                font-size: rpx(30);
                width: rpx(200);
            }
            &-btn {
                flex: 1;
                text-align: right;
                font-size: rpx(30);
                color: $color5;
                &-price {
                    font-size: rpx(30);
                    color: $color3;
                }
                &-img {
                    width: rpx(32);
                    height: rpx(32);
                    margin-left: rpx(100);
                }
            }
        }

    }

    //优惠券
    .show-order .ticket {
        position: fixed;
        background: rgba(0, 0, 0, .5);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        &-main {
            position: relative;
            margin-bottom: rpx(240);
            padding: rpx(30);
            background: $color0;
            min-height: rpx(400);
            .noticket {
                padding-top: rpx(90);
                text-align: center;
                font-size: rpx(40);
                color: $color5;
            }
            &-title {
                padding-bottom: rpx(30);
                font-size: rpx(40);
                text-align: center;
            }
            &-close {
                position: absolute;
                left: 50%;
                bottom: rpx(-100);
                margin-left: rpx(-32);
                width: rpx(64);
                height: rpx(64);
            }
            &-list {
                width: rpx(690);
                margin: auto;
                &-item {
                    position: relative;
                    width: 100%;
                    height: rpx(160);
                    margin-bottom: rpx(30);
                    display: flex;
                    align-items: center;
                    &-left {
                        width: rpx(200);
                        height: rpx(160);

                        background: $color7;
                        border-radius: $radius10 0 0 $radius10;
                        font-size: rpx(20);
                        color: $color0;
                        text-align: center;

                        &-price {
                            padding-top: rpx(50);
                            font-size: rpx(60);
                            &-p{
                                font-size: rpx(30);
                             }
                            &-sign {
                                padding-top: rpx(80);
                                font-size: rpx(24);
                            }
                        }
                    }
                    &-right {
                        flex: 1;
                        width: rpx(240);
                        height: rpx(160);
                        background: $bgcolor1;
                        border-radius: 0 $radius10 $radius10 0;
                        padding-left: rpx(30);
                        &-text1 {
                            font-size: rpx(36);
                            padding-top: rpx(40);
                        }
                        &-text2 {
                            padding-top: rpx(10);
                            font-size: rpx(24);
                            color: $color5;
                        }
                        &-dot {
                            position: absolute;
                            right: rpx(30);
                            top: rpx(55);
                            width: rpx(50);
                            height: rpx(50);
                            border-radius: 50%;
                            background: $color0;
                            border: solid 2px $color7;
                        }

                    }
                }
            }
        }

    }

    //底部
    .show-order .buyBar {
        position: fixed;
        z-index: 9998;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: $color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        &-item {
            flex: 1;
            height: rpx(90);
            &-title {
                padding: rpx(10) 0 0 rpx(30);
                font-size: rpx(24);
            }
            &-price {
                padding-top: rpx(10);
                padding-left: rpx(30);
                font-size: rpx(40);
                color: $color3;
            }
        }
        &-item:last-child {
            border-right: none;
        }
        &-buy {
            width: rpx(300);
            height: rpx(90);
            line-height: rpx(90);
            background: linear-gradient(to left, #ff5722, #ffc000);
            text-align: center;
            font-size: rpx(40);
            color: $color0;
        }
        &-active {
            color: $color3;
        }

    }

</style>
